<template>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="img-header">
          <canvas id="myCanvas" width="100%" height="100%">
            浏览器不支持
          </canvas>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-11">
        <div class="idt">
          <div class="idt-header">
            <h5 class="text-center">营养美味留住新鲜</h5>
            <p style="text-indent:2em">
              海鲜有利于降血脂。科学家发现，爱斯基摩人较少患心血管疾病，这与他们的主要食物来自深海鱼类有关。这些鱼类含有丰富的多价不饱和脂肪酸，可以降低甘油酸酯和低密度脂蛋白胆固醇。减少心血管疾病。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="idt-content">
          <div class="col-12">
            <div class="idt-text" v-for="(item, index) in allGoods" :key="index"
                 style="margin-left: 12px;padding-top: 15px">
              <p>{{item.idt}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="img-header">
          <img src="/static/image/redwine2.png" width="100%" height="100%"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="img-body">
          <div class="col-11">
            <div class="frozen-content" v-for="(item, index) in allData" :key="index"
                 style="margin-left: 12px;padding-top: 15px">
              <h5>{{ item.title }}<br/></h5>
              <span v-if="item.place_of_origin_bf === true">产地：{{ item.place_of_origin }}<br/></span>
              <span v-if="item.specification_bf === true">规格：{{ item.specification }}<br/></span>
              <span v-if="item.content_bf === true">介绍：{{ item.content}}<br/></span>
              <span v-if="item.step_bf === true">制作方法：{{ item.step }}<br/></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="img-footer">
          <img src="/static/image/redwine3.png" width="100%" height="320px"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import imgSrc1 from '../../assets/forzen1.png'
import {getfrozen} from '../../api/api'
export default {
  name: 'forzen',
  data () {
    return {
      allData: null
    }
  },
  methods: {
    getAllFrozen () {
      getfrozen({
        id: this.$route.params.id
      }).then((response) => {
        this.allData = response.data
      })
    },
    getcanvas () {
      var canvas = document.getElementById('myCanvas')
      var cxt = canvas.getContext('2d')
      var img = new Image()
      img.src = imgSrc1
      img.onload = () => {
        cxt.drawImage(img, 0, 0, 300, 300)
      }
    }
  },
  created () {
    this.getAllFrozen()
    this.$nextTick(() => {
      this.getcanvas()
    })
  }
}
</script>

<style>
  .title-content {
    text-indent: 35px
  }

</style>
